import { useEffect } from 'react'
import api from '../api'

function Article () {

    useEffect(() => {
        const getArticle = async () => {
            try {
              const response = await api.axios.get(api.url.getArticle);
              console.log('getArticle', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        getArticle();
        const followUser = async () => {
            try {
              const response = await api.axios.post(api.url.followUser);
              console.log('followUser', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        followUser();
        const unfollowUser = async () => {
            try {
              const response = await api.axios.delete(api.url.unfollowUser);
              console.log('unfollowUser', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        unfollowUser();
        const deleteArticle = async () => {
            try {
              const response = await api.axios.delete(api.url.deleteArticle);
              console.log('deleteArticle', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        deleteArticle();
        const addComments = async () => {
            try {
              const response = await api.axios.post(api.url.addComments);
              console.log('addComments', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        addComments();
        const deleteComment = async () => {
            try {
              const response = await api.axios.get(api.url.deleteComment);
              console.log('deleteComment', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        deleteComment();
        const favoriteArticle = async () => {
            try {
              const response = await api.axios.post(api.url.favoriteArticle);
              console.log('favoriteArticle', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        favoriteArticle();
        const unfavoriteArticle = async () => {
            try {
              const response = await api.axios.delete(api.url.unfavoriteArticle);
              console.log('unfavoriteArticle', response);
            } catch (error) {
              console.log(error);
            }
        };
        
        unfavoriteArticle();
    }, [])

    return (
        <div className="article-page">
            <div className="banner">
                <div className="container">
                    <h1>How to build webapps that scale</h1>
                    <div className="article-meta">
                        <a href="/profile"><img src="http://localhost:3000/avator.webp" alt="imgur" /></a>
                        <div className="info">
                            <a href="/profile" className="author">Eric Simons</a>
                            <span className="date">January 20th</span>
                        </div>
                        <button className="btn btn-sm btn-outline-secondary">
                            <i className="ion-plus-round" />
                            &nbsp; Follow Eric Simons <span className="counter">(10)</span>
                        </button>
                        &nbsp;&nbsp;
                        <button className="btn btn-sm btn-outline-primary">
                            <i className="ion-heart" />
                            &nbsp; Favorite Post <span className="counter">(29)</span>
                        </button>
                    </div>
                </div>
            </div>
            <div className="container page">
                <div className="row article-content">
                    <div className="col-md-12">
                        <p>
                            Web development technologies have evolved at an incredible clip over the past few years.
                        </p>
                        <h2 id="introducing-ionic">Introducing RealWorld.</h2>
                        <p>It's a great solution for learning how other frameworks work.</p>
                    </div>
                </div>
                <hr />
                <div className="article-actions">
                    <div className="article-meta">
                        <a href="profile.html"><img src="http://localhost:3000/avator.webp" alt="头像" /></a>
                        <div className="info">
                            <a href className="author">Eric Simons</a>
                            <span className="date">January 20th</span>
                        </div>
                        <button className="btn btn-sm btn-outline-secondary">
                            <i className="ion-plus-round" />
                            &nbsp; Follow Eric Simons
                        </button>
                        &nbsp;
                        <button className="btn btn-sm btn-outline-primary">
                            <i className="ion-heart" />
                            &nbsp; Favorite Post <span className="counter">(29)</span>
                        </button>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12 col-md-8 offset-md-2">
                        <form className="card comment-form">
                            <div className="card-block">
                                <textarea className="form-control" placeholder="Write a comment..." rows={3} defaultValue={""} />
                            </div>
                            <div className="card-footer">
                                <img src="http://localhost:3000/avator.webp"  alt="头像" className="comment-author-img" />
                                <button className="btn btn-sm btn-primary">Post Comment</button>
                            </div>
                        </form>
                        <div className="card">
                            <div className="card-block">
                                <p className="card-text">
                                    With supporting text below as a natural lead-in to additional content.
                                </p>
                            </div>
                            <div className="card-footer">
                                <a href="/profile" className="comment-author">
                                    <img src="http://localhost:3000/avator.webp"  alt="头像" className="comment-author-img" />
                                </a>
                                &nbsp;
                                <a href="/profile" className="comment-author">Jacob Schmidt</a>
                                <span className="date-posted">Dec 29th</span>
                            </div>
                        </div>
                        <div className="card">
                            <div className="card-block">
                                <p className="card-text">
                                    With supporting text below as a natural lead-in to additional content.
                                </p>
                            </div>
                            <div className="card-footer">
                                <a href="/profile" className="comment-author">
                                    <img src="http://localhost:3000/avator.webp"  alt="头像" className="comment-author-img" />
                                </a>
                                &nbsp;
                                <a href="/profile" className="comment-author">Jacob Schmidt</a>
                                <span className="date-posted">Dec 29th</span>
                                <span className="mod-options">
                                    <i className="ion-edit" />
                                    <i className="ion-trash-a" />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Article;